/**
 * 个人信息
 *
 */
import { View, Text } from "@tarojs/components";
import { My, Right } from "@nutui/icons-react-taro";
import { SafeArea, Avatar } from "@nutui/nutui-react-taro";
import { navigateTo } from "@tarojs/taro";
import { connect } from "react-redux";
import { clear as clearAuth } from "@/store/reducers/user";
import { toggleChooseAvatarUser } from "@/store/reducers/system-info";

function Info({ user, clearAuth, toggleChooseAvatarUser }) {
  const { auth = {}, userInfo = {} } = user || {};
  return (
    <View
      className="rounded-b-[80rpx] w-full pb-[100rpx]"
      style={{
        background: "linear-gradient(0, #57bfff 0%, #67cdff 100%)",
      }}
    >
      <SafeArea position="top"></SafeArea>
      <View className="text-sm text-center mt-[30rpx]">我的</View>
      {auth.token ? (
        <View
          className="inline-flex items-center ml-[30rpx] mt-[60rpx]"
          key="hasAuth"
        >
          <Avatar
            icon={<My size={20} />}
            src={userInfo.headImg}
            onClick={() => toggleChooseAvatarUser(true)}
            className="mr-2 border-[6rpx] border-solid border-white"
          />
          <View>
            <View className="leading-none">
              <Text className="text-[#333] text-[30rpx] mr-1">
                {userInfo.nickName}
              </Text>
              <Text
                onClick={() => {
                  clearAuth();
                }}
                className="text-[#333] text-[30rpx]"
              >
                退出登录
              </Text>
            </View>
            <View className="text-[#666] text-[24rpx] font-normal mt-[6rpx]">
              {userInfo.email}
            </View>
          </View>
        </View>
      ) : (
        <View
          className="inline-flex items-center ml-[30rpx] mt-[60rpx]"
          key="noLogined"
        >
          <Avatar
            icon={<My size={20} />}
            className="mr-2 border-[6rpx] border-solid border-white"
          />
          <View
            onClick={() => {
              navigateTo({ url: "/sub_common/pages/auth/index" });
            }}
          >
            <View className="leading-none">
              <Text className="text-[#333] text-[30rpx] mr-1">登录/注册</Text>
              <Right size={10} color="#333"></Right>
            </View>
            <View className="text-[#666] text-[24rpx] font-normal mt-[6rpx]">
              点击登录/注册
            </View>
          </View>
        </View>
      )}
    </View>
  );
}

export default connect(
  ({ user }: any) => ({
    user,
  }),
  (dispatch: any) => ({
    clearAuth() {
      dispatch(clearAuth());
    },
    toggleChooseAvatarUser(visible) {
      dispatch(toggleChooseAvatarUser(visible));
    },
  })
)(Info) as any;
